<%= javascript_include_tag 'prototype', 'effects', 'dragdrop' %>
<script type="text/javascript">

function remove_question(qid)
{
	div = document.getElementById('question_' + qid);
	div.parentNode.removeChild(div);
}

function remove_answer(qid, aid)
{
	div = document.getElementById('question_' + qid + '_answer_' + aid);
	div.parentNode.removeChild(div);
}

function append_question()
{
	var txt = '																								\
	<div class="js_question" id="question_INDEX">							\
		<table>																									\
		<tr>																										\
		<td>																										\
		<span class="text">Question: </span>										\
		</td>																										\
		<td>																										\
		<span class="entry">																		\
		<textarea name="question[text][]" rows="2"></textarea>  \
		</span>																									\
		</td>																										\
		</tr>																										\
		<tr>																										\
		<td>																										\
		<span class="text">Type: </span>												\
		</td>																										\
		<td>																										\
		<select name="question[type][]">												\
			<option value="checkbox">															\
				Checkbox																						\
			</option>																							\
			<option value="radiobutton">													\
				Radiobutton																					\
			</option>																							\
		</select>																								\
		</td>																										\
		</tr>																										\
		<tr>																										\
		<td>																										\
		<span																										\
		class="text">Scores:</span>															\
		<span class="entry"> 																		\
		</td>																										\
		<td>																										\
			<input id="question_score" name="question[score][]" 	\
						 size="30" type="text"/> 												\
		</span>																									\
		</td>																										\
		</tr>																										\
		</table>																								\
		<input type="hidden" name="question[id][]" 							\
					 value="INDEX" />																	\
		<div id="question_INDEX_answers">												\
		</div>																									\
		<a																											\
		href="#"																								\
		onclick="remove_question(INDEX);">											\
			remove question																				\
		</a>&nbsp;																							\
		<a																											\
		href="#"																								\
		onclick="append_answer(INDEX);">												\
			append answer																					\
		</a>																										\
	</div>';
	var id = get_new_id();
	txt = txt.gsub(/INDEX/, id);
	var node = document.createElement('div');
	node.innerHTML = txt;

	document.getElementById("exam_questions").appendChild(node);
}

function get_new_id()
{
	tmp = document.getElementsByClassName(
		       "js_question");
	max = null;
	for(i = 0; i < tmp.size(); ++i) {
		id = tmp[i].getAttribute("id");
		id = id.replace(/question_/,'');
		if(max == null || i > max) {
			max = i;
		}
	}
	return (max != null) ? max + 1 : 0;
}

function get_new_a_id(q_id)
{
	tmp = document.getElementsByClassName(
			"js_question_" + q_id +
			"_answer");
	max = null;
	for(i = 0; i < tmp.size(); ++i) {
		id = tmp[i].getAttribute("id");
		str = "question_" + q_id + "_answer";
		id = id.gsub(/str/,'');
		if(max == null || i > max) {
			max = i;
		}
	}
	return (max != null) ? max + 1 : 0;
}

function append_answer(q_id)
{
	var txt = '																			\
		<div 																					\
		class="js_question_QINDEX_answer" 						\
		id="question_QINDEX_answer_INDEX"> 						\
			<table>																			\
			<tr>																				\
			<td>																				\
			<span																				\
			class="text">Answer:</span>									\
			</td>																				\
			<td>																				\
			<span class="entry">												\
			<textarea																		\
			name="question_QINDEX[answer][]"></textarea>\
			</span>																			\
			</td>																				\
			<tr>																				\
			<td>																				\
			</td>																				\
			<td>																				\
			<select	name="question_QINDEX[correct][]">	\
				<option value="correct">Correct</option>	\
				<option																		\
				value="incorrect">Incorrect</option>			\
			</select>																		\
			</td>																				\
			</tr>																				\
			</table>																		\
			<a																					\
			href="#"																		\
			onclick="remove_answer(QINDEX, INDEX);">		\
				remove answer															\
			</a>																				\
		</div>																				\
	';
	txt = txt.gsub(/QINDEX/, q_id);
	a_id = get_new_a_id(q_id);
	txt = txt.gsub(/INDEX/, a_id);
	var div = 
		document.getElementById('question_' + 
			q_id + '_answers');

	/**
	 * Bugfix for innerHTML: when you'd make the innerHTML at the original
	 * div Element, the form-contents would be deleted.
	 */
	var node = document.createElement('div');
	node.innerHTML = txt;
	div.appendChild(node);
}


</script>
<p>
<div id="exam_questions">
	<% i = 0 %>
	<% @exam.questions.each do |q| %>

		<div>
		<div class="js_question" id="question_<%= i %>">							
			<table>																									
			<tr>																										
			<td>																										
			<span class="text">Question: </span>										
			</td>																										
			<td>																										
			<span class="entry">																		
			<textarea name="question[text][]" rows="2"><%=q.text%></textarea>  
			</span>																									
			</td>																										
			</tr>																										
			<tr>																										
			<td>																										
			<span class="text">Type: </span>												
			</td>																										
			<td>																										
			<select name="question[type][]">												
				<option value="checkbox" <%= "selected=\"selected\"" if q.checkbox == 0 %>>															
					Checkbox																						
				</option>																							
				<option value="radiobutton" <%= "selected=\"selected\"" if q.checkbox == 1 %>>													
					Radiobutton																					
				</option>																							
			</select>																								
			</td>																										
			</tr>																										
			<tr>																										
			<td>																										
			<span																										
			class="text">Scores:</span>															
			<span class="entry"> 																		
			</td>																										
			<td>																										
				<input id="question_score" name="question[score][]" 	
							 size="30" type="text" value="<%=q.score%>"/> 												
			</span>																									
			</td>																										
			</tr>																										
			</table>																								
			<input type="hidden" name="question[id][]" 							
						 value="<%=i%>" />																	
			<div id="question_<%=i%>_answers">												
				<% j = 0 %>
				<% q.answers.each do |a| %>
					<div>
					<div class="js_question_<%=i%>_answer" 
					id="question_<%=i%>_answer_<%=j%>"> 						
						<table>																			
						<tr>																				
						<td>																				
						<span																				
						class="text">Answer:</span>									
						</td>																				
						<td>																				
						<span class="entry">												
						<textarea name="question_<%=i%>[answer][]"><%=a.text%></textarea>
						</span>																			
						</td>																				
						<tr>																				
						<td>																				
						</td>																				
						<td>																				
						<select	name="question_<%=i%>[correct][]">	
							<option value="correct" <%= "selected=\"selected\"" if a.correctness == 1%>>Correct</option>	
							<option	value="incorrect" <%= "selected=\"selected\"" if a.correctness == 0%>>Incorrect</option>			
						</select>																		
						</td>																				
						</tr>																				
						</table>																		
						<a																			
						href="#"																	
						onclick="remove_answer(<%=i%>, <%=j%>);">
							remove answer	
						</a>
					</div>																				
					</div>
					<% j = j + 1 %>
				<% end %>
			</div>																									
			<a																
			href="#"													
			onclick="remove_question(<%=i%>);">
				remove question									
			</a>&nbsp;
			<a																
			href="#"													
			onclick="append_answer(<%=i%>);">	
				append answer										
			</a>															
		</div>
		</div>

		<% i = i + 1 %>
	<% end %>
</div>
<a href="#" onclick="append_question();"> append question </a><br/>
</p>
